<template>
  <div>
    <message-dialog
      title="确认信息"
      content="检测到未保存的内容，是否在离开前保存修改？"
      :show.sync="isSaveDialogVisible"
      operatButtonText="放弃修改"
      confirmButtonText="保存"
      @operating="closeDialog"
      @confirm="confirmUpdate"
    >
    </message-dialog>

    <message-dialog
      title="确认信息"
      content="是否在关闭前保存修改？"
      :show.sync="isTabSaveDialogVisible"
      operatButtonText="放弃修改"
      confirmButtonText="保存"
      @operating="closeTabDialog"
      @confirm="saveTabAndClose"
    >
    </message-dialog>

    <el-dialog
      ref="simTextDialog"
      v-bind="$attrs" v-on="$listeners"
      :fullscreen="fullscreen"
      :visible.sync="textPreviewVisible"
      :title="file.name"
      :close-on-click-modal="false"
      @close="closeDialog"
      :before-close="handleClose"
      :width="dialogWidth+'px'"
      v-resize="containerResize"
      class="simtext-dialog"
      v-dialogDrag="{ dialogWidthPercent: dialogWidthPercent}">
      <div slot="title" class="simtext-header-title">
        <span><file-path-nav class="title-name" :path="filePathNav" @loadPath="loadPath"></file-path-nav></span>
        <div class="title-extension">
          <el-button v-if="isShowUpdateBtn" @click="saveAll(false)" :class="lightTheme?'':'dark-button'" size="small" :loading="updating">保存所有</el-button>
          <el-button
            v-if="editableTabsValue.endsWith('.md')"
            :class="lightTheme?'':'dark-button'"
            size="small"
            circle
            @click="changePreviewMode"
            :title="previewMode?'编辑':'预览'"
          >
            <icon :type="previewMode?lightTheme?'icon-quxiaoyulan1':'icon-quxiaoyulan1-copy':lightTheme?'icon-yulan':'icon-yulan-copy'"></icon>
          </el-button>
          <el-button
            :class="lightTheme?'':'dark-button'"
            size="small"
            :icon="lightTheme?'el-icon-moon':'el-icon-sunny'"
            circle
            :title="lightTheme?'暗色':'亮色'"
            @click="skinning"
          />
          <button class="title-extension-button" @click="fullScreen" size="small">
            <svg-icon :icon-class="fullscreen?'normalscreen':'fullscreen'"></svg-icon>
          </button>
        </div>
      </div>
      <div class="content" :style="{height: editorHieght+26+'px'}">
        <div class="file-contents" :style="{width: contentsWidth+'px',height: editorHieght+32+'px',transition: transition,left: options.readOnly?`-${contentsWidth}px`:`0px`}">
          <div class="content-tree">
            <fancy-tree
              ref="fancTree"
              :editableTabs="editableTabs"
              :editableTabsValue.sync="editableTabsValue"
              :contentsWidth="contentsWidth"
              :contentsHieght="editorHieght"
              :lightTheme="lightTheme"
              :directoryTreeData="directoryTreeData"
              @treeNodeClick="treeNodeClick"
              @onLoadTreePath="onLoadTreePath"
              @onRename="onRename"
            >
            </fancy-tree>
          </div>
        </div>
        <div class="editor-resize" :style="{marginLeft: options.readOnly?`0px`:`${contentsWidth}px`,transition: transition}">
          <div class="darg-resize-conter"></div>
          <i v-show="!options.readOnly" class="editor-resize-conter" icon="el-icon-arrow-right" title="影藏文件目录" @click="hideContents"/>
        </div>
        <div :style="{width: editorWidth-2+'px'}">
          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
            <el-tab-pane
              v-for="(item,index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <span slot="label"><svg-icon class="tabs-icon-svg" :icon-class="findSvgClass(item.name)"></svg-icon> {{item.title}}</span>
              <div v-if="textPreviewVisible" class="editor">
                <vditor-preview
                  class="content-body"
                  v-show="editableTabsValue.endsWith('.md') && previewMode"
                  :content="item.content"
                  :style="{height: editorHieght+'px'}"
                />
                <MonacoEditor
                  v-show="editableTabsValue.endsWith('.md') ? !previewMode: true"
                  ref="monacoEditor"
                  :width="editorWidth"
                  :height="editorHieght"
                  :theme="lightTheme?'vs':'vs-dark'"
                  :language="item.language"
                  :diffEditor="diffEditor"
                  original="..."
                  :value="item.content"
                  :options="options"
                  @change="change($event,index)"
                  @save="save($event,index)"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="nwse-resize" :style="{left: dialogWidth-15+'px'}"></div>
    </el-dialog>

  </div>
</template>
<script>

  import '@/utils/directives.js'
  import api from '@/api/file-api'
  import markdownApi from '@/api/markdown-api'

  import { iconClass,lineWrapping,suffix } from '@/utils/file-type'

  import MonacoEditor from '../MonacoEditorVue'
  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'

  import FileTree from"@/components/FileTree"
  import FancyTree from"@/components/FancyTree"
  import MessageDialog from "@/components/message/MessageDialog"
  import FilePathNav from '@/components/Breadcrumb/FilePathNav'
  import Icon from '@/components/Icon/Icon.vue'

  import VditorPreview from "@/components/preview/VditorPreview";

  export default {
    name: "SimTextPreview",
    components: {
      Icon,MonacoEditor,FileTree,FancyTree,MessageDialog,FilePathNav,VditorPreview
    },
    props: {
      file: {
        type: Object,
        default: function () {
          return {}
        }
      },
      shareId: {
        type: String,
        default: undefined
      },
      filepath: {
        type: String,
        default: undefined
      },
      status: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    data(){
      return{
        lightTheme: true,
        contentsHide: false,
        defalutLanguage: 'redis',
        lineWrapping: false,
        options: {
          fontSize: 14,
          contextmenu: true,
          codeLens: true,
          readOnly: true,
          minimap: {
            enabled: this.$pc
          },
          // 换行
          wordWrap: this.lineWrapping ? 'wordWrapColumn':'',
          wordWrapMinified: true,
          wrappingIndent: "indent"
        },
        diffEditor: false,
        textPreviewVisible: false,
        fullscreen: false,
        dialogWidth: 0,
        dialogWidthPercent: 0.7,
        lastTransform: undefined,
        contentsWidth: 273,
        editorWidth: 1035,
        editorHieght: 640,
        transition: 'all 500ms ease 0s',
        content: '',
        newContent: '',
        previewMode: true,
        isShowUpdateBtn: false,
        updating: false,
        modifyMsg: undefined,
        isSaveDialogVisible: false,
        isTabSaveDialogVisible: false,
        removeIndex: 0,
        loading: {},
        darkButton: {
          background: '#3e3e3e!important',
          border: '1px solid #3e3e3e!important',
          color: '#ffffff!important'
        },
        directoryTreeData: {},
        editableTabsValue: '1',
        editableTabs: [],
        filePathNav: '',
        toolbars: {
          readmodel: true, // 沉浸式阅读
          navigation: true, // 导航目录
        }
      }
    },
    mounted() {
      this.$nextTick(()=>{
        this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent
      })
    },
    directives: {
      resize: { // 指令的名称
        bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
          let width = '', height = '';
          function isReize() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
              binding.value();  // 关键
            }
            width = style.width;
            height = style.height;
          }
          el.__vueSetInterval__ = setInterval(isReize, 0);
        },
        unbind(el) {
          clearInterval(el.__vueSetInterval__);
        }
      }
    },
    watch: { //监听file的变化，进行相应的操作即可
      file(file) {
        if(!file.path){
          return
        }
        this.editableTabs = []
        this.checkReadOnly(file.userId)
        this.loadEditorSize()
        this.loading = this.$message({
          iconClass: 'el-icon-loading',
          type: 'info',
          duration: 0,
          dangerouslyUseHTMLString: true,
          offset: 100,
          message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
        })
        if(lineWrapping.includes(file.suffix)) {
          this.options.wordWrap = 'wordWrapColumn'
          this.lineWrapping = true
        }else{
          this.options.wordWrap = ''
        }
        let request = 'previewText'
        if(this.shareId){
          request = 'sharePreviewText'
        }
        if(this.filepath){
          request = 'previewTextByPath'
          file.path = this.filepath
        }
        if(!file.id){
          request = 'previewTextByPath'
        }
        api[request]({
          shareId: this.shareId,
          fileId: file.id,
          id: file.id,
          path: file.path,
          username: this.$store.state.user.name
        }).then((res)=>{
          this.loading.close()
          this.directoryTreeData = {name: res.data.name, isFolder: true, isLeaf: false, id: res.data.id, path: res.data.path}
          this.textPreviewVisible = true
          this.content = res.data.contentText

          let pathname = res.data.path.substring(1,res.data.path.length)+res.data.name
          if('previewTextByPath' === request){
            pathname = `/${res.data.path}/${res.data.name}`
          }

          // 加载tabs
          this.editableTabs.push({
            title: res.data.name,
            copyTitle: res.data.name,
            language: this.getEditorLanguage(res.data.suffix),
            status: undefined,//标签状态
            name: pathname,
            content: res.data.contentText
          })
          this.editableTabsValue = pathname
          // 界面的渲染后的初始化工作
          this.$nextTick(()=>{
            this.onDialogDblClick()
            this.dargDialogSize()
            this.dragControllerDiv()
            this.setTheme()
          })
        }).catch(() => {
          this.loading.close()
        })
      },
      status: function(visible) {
        if(visible && this.loading.closed){
          this.textPreviewVisible = true
        }
      },
      editableTabsValue(value){
        if(value.endsWith('.md')){
          this.previewMode = false
        }
      }
    },
    methods:{
      getEditorLanguage(suffix) {
        let editorLanguage = this.defalutLanguage
        let languages = monaco.languages.getLanguages();
        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.' + suffix))
        if (languagesIndex > -1) {
          editorLanguage = languages[languagesIndex].id
        }
        return editorLanguage;
      },
      // 隐藏目录
      hideContents(){
        const that = this
        let contents = document.querySelector('.file-contents')
        let resize = document.querySelector('.editor-resize')
        if(!this.contentsHide){
          contents.style.left = `-${this.contentsWidth}px`
          resize.style.marginLeft = '0px'
          setTimeout(function () {
            that.editorWidth += that.contentsWidth
          },250)
          this.contentsHide = true
          resize.setAttribute('icon-style', 'hide')
        }else{
          contents.style.left = '0px'
          resize.style.marginLeft = `${this.contentsWidth}px`
          setTimeout(function () {
            that.editorWidth -= that.contentsWidth
          },250)
          this.contentsHide = false
          resize.setAttribute('icon-style', 'show')
        }
      },
      // 双击header放大缩小
      onDialogDblClick() {
        const dialogHeader = document.querySelector('.simtext-dialog .el-dialog__header')
        const that = this
        dialogHeader.ondblclick = function (e) {
          if(e.target && 'simtext-header-title' === e.target.className){
            that.fullScreen()
          }
        }
      },
      // 拖动调整窗口大小
      dargDialogSize(){
        // 右下角
        let nwse = document.querySelector('.el-dialog__body .nwse-resize')
        if(nwse){
          const that = this
          nwse.onmousedown = function (e) {
            let startX = e.clientX;
            let startY = e.clientY;
            let editorWidth = that.editorWidth
            let editorHieght = that.editorHieght
            let dialogWidth = that.dialogWidth
            document.onmousemove = function (e) {
              let endX = e.clientX;
              let endY = e.clientY;
              const moveX = endX - startX
              if((dialogWidth + moveX) > 600){
                that.dialogWidth = dialogWidth + moveX
                that.editorWidth = editorWidth + moveX
                that.editorHieght = editorHieght + (endY - startY)
                that.loadConterSize()
              }
            }
            // 鼠标松开事件
            document.onmouseup = function () {
              document.onmousemove = null
              document.onmouseup = null
              nwse.releaseCapture && resize.releaseCapture()
            }
            nwse.setCapture && nwse.setCapture()
            return false
          }
        }
      },
      // 拖动调整目录的宽度
      dragControllerDiv() {
        let dialogBody = document.querySelector('.el-dialog__body .content')
        let resize = document.querySelector('.el-dialog__body .content .editor-resize')
        let contents = document.querySelector('.file-contents')
        let leftTools = document.querySelector('.file-contents .dir-tools')
        if(resize){
          // 鼠标按下事件
          const that = this
          resize.onmousedown = function (e) {
            if(that.contentsHide){
              return false
            }
            let startX = e.clientX
            let contentsStartWidth = contents.offsetWidth
            let dialogBodyWidth = dialogBody.clientWidth
            let contentsMaxWidth = (dialogBodyWidth * 0.6)>273?(dialogBodyWidth * 0.6):600
            // 鼠标拖动事件
            document.onmousemove = function (e) {
              that.transition = 'none 500ms ease 0s'
              let endX = e.clientX
              // 移动的距离。负数向左移动,正数向右移动
              let moveLen = endX - startX
              if((contentsStartWidth + moveLen) > leftTools.style.minWidth.split('\px')[0]){
                let contentsWidth = contentsStartWidth + moveLen
                if(contentsWidth < contentsMaxWidth){
                  that.contentsWidth = contentsWidth
                  that.editorWidth = that.dialogWidth - (contentsStartWidth + moveLen)
                }
              }
            }
            // 鼠标松开事件
            document.onmouseup = function (evt) {
              document.onmousemove = null
              document.onmouseup = null
              //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
              resize.releaseCapture && resize.releaseCapture()
              that.transition = 'all 500ms ease 0s'
            }
            //该函数在属于当前线程的指定窗口里设置鼠标捕获
            resize.setCapture && resize.setCapture()
            return false
          }
        }
      },
      findSvgClass(fileName){
        const suffix = fileName.substring(fileName.lastIndexOf('.') + 1);
        if(iconClass.has(suffix)){
          return iconClass.get(suffix)
        }
        return 'file'
      },
      loadPath(data){
        this.$refs.fancTree.loadPath(data)
      },
      onRename(row){
        // 同步到 editableTabs
        this.editableTabs.map(item => {
          if(item.name === row.oldPath){
            item.title = row.name
            item.copyTitle = row.name
            item.name = row.path
          }
          return item
        })
        this.editableTabsValue = row.path
      },
      onLoadTreePath(path){
        this.filePathNav = path
      },
      treeNodeClick(row) {
        if(row.isFolder){
          return
        }
        if(!suffix.simText.includes(row.suffix)){
          return
        }
        let languages = monaco.languages.getLanguages();
        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+row.suffix))
        if(languagesIndex > -1){
          this.language = languages[languagesIndex].id
        }else{
          this.language = this.defalutLanguage
        }
        if(lineWrapping.includes(row.suffix)) {
          this.options.wordWrap = 'wordWrapColumn'
          this.lineWrapping = true
        }else{
          this.options.wordWrap = ''
        }
        if(this.editableTabs.findIndex(tab=> tab.name===row.path) < 0){
          this.loading = this.$message({
            iconClass: 'el-icon-loading',
            type: 'info',
            duration: 0,
            dangerouslyUseHTMLString: true,
            offset: document.body.clientHeight/3,
            message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
          })
          api.previewTextByPath({
            path: row.path,
            username: this.$store.state.user.name
          }).then((res)=>{
            this.loading.close()
            // 添加一个tab
            let tab = {
              title:row.name,
              copyTitle:row.name,
              status: undefined,
              language: this.getEditorLanguage(row.suffix),
              name:row.path,
              content:res.data.contentText
            }
            if(row.isAddTab){
              this.editableTabs.push(tab)
            }else{
              let thisTabIndex = this.editableTabs.findIndex(tab=> tab.status===undefined)
              if(thisTabIndex > -1){
                this.editableTabs[thisTabIndex] = tab
              }else{
                this.editableTabs.push(tab)
              }
            }
            this.editableTabsValue = row.path
          }).catch(() => {
            this.loading.close()
          })
        }else{
          this.editableTabsValue = row.path
        }
      },
      containerResize() {
        this.loadEditorSize()
      },
      checkReadOnly(fileUserId){
        if(this.$store.state.user.token && this.$store.state.user.userId === fileUserId){
          this.options.readOnly = false
        }
        if(this.options.readOnly){
          this.editorWidth += this.contentsWidth
          this.contentsHide = true
        }
      },
      loadEditorSize(){
        this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent
        if(this.contentsHide){
          this.editorWidth = this.dialogWidth
        }else{
          this.editorWidth = this.dialogWidth - this.contentsWidth
        }
        this.editorHieght = document.body.clientHeight * this.dialogWidthPercent - 76
        this.loadConterSize()
      },
      loadConterSize(){
        let conter = document.querySelector('.editor-resize .editor-resize-conter');
        if(conter){
          conter.style.marginTop = ((this.editorHieght+26)/2 - conter.clientHeight/2) + 'px'
        }
      },
      handleClose(done) {
        if(this.isShowUpdateBtn){
          this.isSaveDialogVisible = true
        }else{
          done()
          this.closeAllTabs()
        }
      },
      saveTabAndClose(){
        this.update(this.editableTabs[this.removeIndex].change,this.editableTabs[this.removeIndex].name)
        this.isTabSaveDialogVisible = false
        this.editableTabs.splice(this.removeIndex,1)
      },
      confirmUpdate(){
        this.saveAll(true)
        this.textPreviewVisible = false
        this.$emit('update:status', this.textPreviewVisible)
        this.isSaveDialogVisible = false
        this.isShowUpdateBtn = false
      },
      closeTabDialog(){
        this.isTabSaveDialogVisible = false
        this.editableTabs.splice(this.removeIndex,1)
      },
      closeDialog() {
        this.textPreviewVisible = false
        this.$emit('update:status', this.textPreviewVisible)
        this.isSaveDialogVisible = false
        this.isShowUpdateBtn = false
        this.closeAllTabs()
      },
      change(value,index) {
        if(value === this.editableTabs[index].content){
          if(this.editableTabs[index].copyTitle !== this.editableTabs[index].title){
            this.editableTabs[index].title = this.editableTabs[index].copyTitle
            this.editableTabs[index].status = 'Modified'
            // 没有任何改变
            if(this.editableTabs.findIndex(tab=>tab.title !== tab.copyTitle) < 0){
              this.isShowUpdateBtn = false
            }
          }
        }else{
          if(this.editableTabs[index].copyTitle === this.editableTabs[index].title){
            this.editableTabs[index].title += '*'
            this.editableTabs[index].status = 'Modifying'
            this.isShowUpdateBtn = true
            this.editableTabs[index].change = value
          }
        }
      },
      saveAll(isClose){
        this.editableTabs.forEach((tab,index) => {
          if(tab.status === 'Modifying'){
            if(isClose){
              this.update(tab.change,tab.name)
            }else{
              this.update(tab.change,tab.name,index)
            }
          }
        })
        if(isClose){
          this.closeAllTabs()
        }
      },
      closeAllTabs(){
        this.editableTabs.splice(0,this.editableTabs.length)
        this.$emit('update:file', {})
      },
      save(value,index) {
        if(value !== this.editableTabs[index].content && this.isShowUpdateBtn){
          this.update(value,this.editableTabs[index].name,index)
        }
      },
      update(value,path,index) {
        this.updating = true
        markdownApi.editMarkdownByPath({
            relativePath: path,
            userId: this.$store.state.user.userId,
            username: this.$store.state.user.name,
            contentText: value
          }).then(() => {
            this.updating = false
            if(undefined !== index){
              this.editableTabs[index].content = value
              if(this.editableTabs[index].copyTitle !== this.editableTabs[index].title){
                this.editableTabs[index].title = this.editableTabs[index].copyTitle
                this.editableTabs[index].status = 'Modified'
                // 没有任何改变
                if(this.editableTabs.findIndex(tab=>tab.title !== tab.copyTitle) < 0){
                  this.isShowUpdateBtn = false
                }
              }
            }else{
              let update = false
              this.editableTabs.forEach((tab) => {
                if(tab.status === 'Modifying'){
                  update = true
                }
              })
              if(!update){
                this.isShowUpdateBtn = false
              }
            }
            if(!this.modifyMsg){
              this.modifyMsg = this.$message({
                message: "更新成功",
                type: 'success',
                duration : 1000
              });
              const that = this
              setTimeout(function () {
                that.modifyMsg = undefined
              },1000)
            }
          }).catch(() => {
            this.updating = false
        })
      },
      // 全屏
      fullScreen() {
        this.fullscreen = !this.fullscreen
        const dragDom = document.querySelector('.simtext-dialog .el-dialog');
        if(this.fullscreen){
          this.lastTransform = dragDom.style.transform
          this.dialogWidthPercent = 1
          this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent
          dragDom.style.transform="translate("+0+"px,"+0+"px)";
        }else{
          this.dialogWidthPercent = 0.7
          this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent
          let x = (document.body.clientWidth - this.dialogWidth)/2
          let y = (document.body.clientHeight - this.dialogWidth)/2
          if(this.lastTransform){
            dragDom.style.transform=this.lastTransform
          }else{
            dragDom.style.transform="translate("+x+"px,"+y+"px)"
          }
        }
        this.containerResize()
      },
      // 换肤
      skinning() {
        this.transition = 'none 500ms ease 0s'
        this.lightTheme = !this.lightTheme
        this.setTheme()
        const that = this
        setTimeout(function () {
          that.transition = 'all 500ms ease 0s'
        },100)
      },
      setTheme(){
        let dialog = document.querySelector('.simtext-dialog .el-dialog')
        let header = document.querySelector('.simtext-dialog .el-dialog .el-dialog__header')
        let fileContests = document.querySelector('.content');
        if(this.lightTheme){
          header.style.background = '#e6e6e6'
          header.style.color = '#181818'
          if(fileContests){
            fileContests.setAttribute('data-theme', 'light')
          }
          if(dialog){
            dialog.style.background = '#fff'
          }
          if(header){
            header.setAttribute('data-theme', 'light')
          }
        }else{
          header.style.background = '#2e2e30'
          header.style.color = '#fff'
          if(dialog){
            dialog.style.background = '#181818'
          }
          if(fileContests){
            fileContests.setAttribute('data-theme', 'dark')
          }
          if(header){
            header.setAttribute('data-theme', 'dark')
          }
        }
      },
      changePreviewMode() {
        this.previewMode = !this.previewMode
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        let removeIndex = 0
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              removeIndex = index
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        if(this.editableTabs[removeIndex].status !== 'Modifying'){
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }else{
          this.removeIndex = removeIndex
          this.isTabSaveDialogVisible = true
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  @import "src/styles/markdown";

  $bg-color: #292929;
  $tree-title-bg-color: #3e3e3e;

  @mixin scrollBarLightStyle() {
    &::-webkit-scrollbar {
      width: 7px!important;
      height: 10px!important;
    }
    &::-webkit-scrollbar-thumb {
      border: unset!important;
      background-color: #c1c1c1 !important;
      border-radius: unset!important;
      outline: unset;
      outline-offset: unset;
    }
    &::-webkit-scrollbar-track-piece {
      border: unset!important;
      background-color: #ececec !important;
      border-radius: unset!important;
    }
  }

  @mixin scrollBarDarkStyle() {
    &::-webkit-scrollbar {
      width: 7px!important;
      height: 10px!important;
    }
    &::-webkit-scrollbar-thumb {
      border: unset!important;
      background-color: #aeaeae !important;
      border-radius: unset!important;
    }
    &::-webkit-scrollbar-track-piece {
      border: unset!important;
      background-color: #3e3e3e !important;
      border-radius: unset!important;
    }
  }

  >>> .v-note-show.single-show {
    ::-webkit-scrollbar {
      width: 10px!important;
      height: 10px!important;
    }
    ::-webkit-scrollbar-thumb {
      border: unset!important;
      background-color: #c1c1c1 !important;
      border-radius: unset!important;
    }
    ::-webkit-scrollbar-track-piece {
      border: unset!important;
      background-color: #ececec !important;
      border-radius: unset!important;
    }
  }

  /deep/.el-dialog {
    /*width: 1035px;*/
    margin: 0 !important;
    overflow: hidden;

    .el-button--small.is-circle {
      padding: 9px 10px;
    }

    .light-button {
      background: #ececec;
      border: 1px solid #ececec;
    }

    .dark-button {
      background: #3e3e3e;
      border: 1px solid #3e3e3e;
      color: #ffffff;
    }
    .light-button:hover {
      background: #DCDFE6;
    }
    .dark-button:hover {
      color: #409EFF;
      background-color: #181818;
    }

    .el-dialog__header {
      padding: 5px 20px 5px;

      .el-dialog__headerbtn {
        top: 12px;
        right: 16px;
        .el-dialog__close {
          font-size: 26px;
        }
      }
      .title-name {
        line-height: 34px;
      }
      .title-extension {
        float: right;
        margin-right: 30px;
        margin-top: 3px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;

        .title-extension-button {
          padding: 5px;
          margin-left: 15px;
          background: 0 0;
          border: none;
          outline: 0;
          cursor: pointer;
          color: #909399;
          .svg-icon {
            font-size: 18px;
          }
          .svg-icon:hover {
            color: #409EFF;
          }
        }

      }

      &[data-theme=dark] {
        .redirect{
          color: #f5f5f5;
        }
        .no-redirect {
          color: #b7b7b7;
        }
        .home-link {
          color: #f5f5f5;
        }
      }

    }
    .el-dialog__body {
      padding: 0;
      word-break: normal;
    }
    .content {
      background: #F3F3F3;
      border-top: unset!important;
      display: inline-flex;

      .monaco-editor .minimap-shadow-visible {
        position: absolute;
        left: 0px;
        width: 6px;
        box-shadow: -2px 0px 5px #dddddd;
      }

      .el-tabs__header {
        margin: 0 0 0;
        .el-tabs__item {
          height: 32px;
          line-height: 32px;
        }
      }

      .tabs-icon-svg {
        font-size: 14px;
      }

      .el-tabs--card>.el-tabs__header {
        border-bottom: unset;
        .el-tabs__nav {
          border: unset;
        }
        .el-tabs__item {
          border-left: 1px solid #f3f3f3;
          color: #6A6A6A;
          background-color: #ebebeb;
        }
        .el-tabs__item:first-child {
          border-left: none;
        }
        .el-tabs__item.is-active {
          border-bottom-color: #ffffff;
          background-color: #ffffff;
          color: #2F302F;
        }
      }

      .editor_main_storey {
        display: inline-block;
        position: absolute;
        z-index: 999;
        width: 100%;
        height: 5px;
        background: linear-gradient(rgba(221,221,221,1), rgba(255, 255, 255, 0));
      }

      .el-tabs__nav-wrap {
        //margin-left: -1px;
      }

      .el-tabs--card>.el-tabs__header .el-tabs__nav {
        border-radius: 0 0 0 0;
      }

      .el-tabs__nav-next, .el-tabs__nav-prev {
        line-height: 32px;
      }

      .file-contents{

        left: 0;
        position: absolute;

        .content-tree{
          background-color: #F3F3F3;
          //box-shadow: inset #ececec -7px 0px;

          .svg-icon {
            font-size: 18px;
          }
          #dir-tree {

            $fancytreeTitleHoverColor: #E9E9E9;
            $fancytreeTitleActiveColor: #b6d8fb;

            overflow-x: hidden;
            @include scrollBarLightStyle;

            ul.fancytree-container{
              padding: 3px 0 0 0;
              background-color: #F3F3F3;
            }

            span.fancytree-title {
              padding: 2.5px 3px 0 3px;
            }

            .fancytree-active {
              background-color: $fancytreeTitleActiveColor;
            }

            .fancytree-active:hover {
              background-color: $fancytreeTitleActiveColor!important;
            }

            .fancytree-node:hover {
              background-color: $fancytreeTitleHoverColor;
            }

            .fancytree-plain span.fancytree-active span.fancytree-title{
              background-color: $fancytreeTitleActiveColor;
              border-color: $fancytreeTitleActiveColor;
              color: #000000;
            }
            .fancytree-plain span.fancytree-active:hover span.fancytree-title{
              background-color: $fancytreeTitleActiveColor!important;
              border-color: $fancytreeTitleActiveColor!important;
            }

            .fancytree-plain span.fancytree-node:hover span.fancytree-title{
              background-color: $fancytreeTitleHoverColor;
              border-color: $fancytreeTitleHoverColor;
            }

            .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
              background-color: $fancytreeTitleActiveColor;
              border-color: $fancytreeTitleActiveColor;
            }

          }
        }

        .dir-tools {
          background: #ececec;
          .el-button--small {
            padding: 9px 10px;
          }
          .el-button-group {
          display: unset;
          vertical-align: middle;
          }
        }

      }

      .editor-resize {
        width: 2px;
        bottom: 0;
        top: 0;
        cursor: col-resize;
        background-color: #ffffff;
        .darg-resize-conter {
          width: 2px;
        }
        .editor-resize-conter{
          height: 50px;
          width: 14px;
          position: absolute;
          z-index: 999;
          // top: 48%;
          background: #e2e2e2;
          border-top-right-radius: 15px;
          border-bottom-right-radius: 15px;
          border: 1px solid #ececec;
          border-left: none;
          cursor: pointer;
        }
        .editor-resize-conter:after {
          content: " ";
          display: inline-block;
          height: 10px;
          width: 10px;
          position: absolute;
          top: 50%;
          margin-top: -5px;
          left: 3px;
          z-index: 999;
          border-width: 2px 2px 0 0;
          border-color: #9a9a9a;
          border-style: solid;
          -webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
          transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
        }

        &[icon-style=hide] {
          .editor-resize-conter:after {
            left: -2px;
            -webkit-transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
            transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0);
          }
        }

      }

      &[data-theme=dark] {

        background: #202020;

        .monaco-editor .minimap-shadow-visible {
         box-shadow: -2px 0px 5px #000000;
        }

        .editor-resize {
          background-color: #181818;
          .editor-resize-conter{
            background: #292929;
            border: 1px solid #3e3e3e;
            border-left: 1px solid #292929;
          }
          .editor-resize-conter:after {
            border-color: #b2b2b2;
          }
        }

        .el-tabs--card>.el-tabs__header {
          border-bottom: unset;
          .el-tabs__nav {
            border: unset;
          }
          .el-tabs__item {
            border-left: 1px solid #202021;
            color: #aaaaaa;
            background-color: #292929;
          }
          .el-tabs__item:first-child {
            border-left: none;
          }
          .el-tabs__item.is-active {
            border-bottom-color: #181818;
            background-color: #181818;
            color: #fefefe;
          }
        }

        .file-contents{

          background: #3e3e3e;

          .dir-tools {
            background: #3e3e3e;
          }

          .content-tree {
            background: #202021;
            //box-shadow: inset #2d2d2d -7px 0px;
            #dir-tree {
              @include scrollBarDarkStyle;
              span.fancytree-title {
                color: #dedede;
              }
              ul.fancytree-container {
                background: #202021;
              }

              $fancytreeTitleHoverColor: #242A2B;
              $fancytreeTitleActiveColor: #004471;

              .fancytree-active {
                background-color: $fancytreeTitleActiveColor;
              }

              .fancytree-active:hover {
                background-color: $fancytreeTitleActiveColor!important;
              }

              .fancytree-node:hover {
                background-color: $fancytreeTitleHoverColor;
              }

              .fancytree-plain span.fancytree-active span.fancytree-title{
                background-color: $fancytreeTitleActiveColor;
                border-color: $fancytreeTitleActiveColor;
                color: #FFFFFF;
              }
              .fancytree-plain span.fancytree-active:hover span.fancytree-title{
                background-color: $fancytreeTitleActiveColor!important;
                border-color: $fancytreeTitleActiveColor!important;
              }

              .fancytree-plain span.fancytree-node:hover span.fancytree-title{
                background-color: $fancytreeTitleHoverColor;
                border-color: $fancytreeTitleHoverColor;
              }

              .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
                background-color: $fancytreeTitleActiveColor;
                border-color: $fancytreeTitleActiveColor;
              }

              .fancytree-edit-input {
                background-color: #202021;
                border: unset;
              }

            }
          }
        }
        .editor_main_storey {
          background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
        }

        .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
          background-color: #181818;
        }

        .monaco-editor{
          .margin {
            background-color: #181818;
          }
        }

      }
    }
    .nwse-resize {
      z-index: 99999;
      position: fixed;
      width: 15px;
      background: #00000000;
      height: 15px;
      margin-top: -15px;
      float: right;
      cursor: nwse-resize;
    }
    .el-button--small.is-circle {
      padding: 9px 9px;
    }
  }
</style>
<style lang="scss" scoped>
  >>>.jmal-message-dialog {
    width: 420px;
    height: 200px;
    top: calc(50% - 100px);
    left: calc(50% - 210px);
    .el-dialog {
      .el-dialog__header {
        padding: 15px 20px 15px;
      }
      .el-dialog__body {
        padding: 0 10px 5px 20px;
      }
    }
  }
  >>> .fancytree-expander {
    margin-top: 5px;
  }
  .content-body {
    overflow-y: scroll;
    padding: 20px 30px;
    background-color: #ffffff;
  }
</style>
